<template>
          <div class="box">
              <header>
                     <i class="iconfont icon-weibiaoti-- fh" @click="back" ></i>
                     <span class="title">公司信息</span>
               </header>
               <h1 style="width:100%;height:1.88rem;"></h1>
               <h2 class="iconfont icon-renzhengdunpaianquanbaozhangzhibao-xianxing">
                    &nbsp;<span class="ts">平台承诺不会联系您所在单位，请根据实际填写</span>
               </h2>
               <main>
                     <div class="list">  
                            <span>公司名称</span>
                            <input type="text" v-model="gsname" placeholder="请输入公司名称">
                     </div>
                     <div class="list">  
                            <span>公司地址</span>
                            <input type="text" v-model="gsdz" placeholder="请输入公司地址">
                     </div>
                     <div class="list">  
                            <span style="width:28%">所属行业</span>
                            <el-select v-model="value4" clearable placeholder="请选择" style="position:relative;top:0;bottom:0;margin:auto 0;">
                               <el-option 
                                   v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                           </el-option>
                        </el-select>
                     </div>
                     <div class="list" style="border:none" >  
                            <span style="width:28%">工作年限</span>
                            <el-select v-model="value5" clearable placeholder="请选择" style="position:relative;top:0;bottom:0;margin:auto 0;">
                               <el-option 
                                   v-for="item in options2"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                           </el-option>
                        </el-select>
                     </div>
               </main>
               <nav style="width:100%;position:fixed;bottom:0.75rem;padding:0 5%;">
               <button class="tj" @click="tj">提 交</button>
               </nav>
          </div>
</template>

<script>


export default {
       data(){
           return{
                  options: [{
                        value: '金融',
                        label: '金融'
                        }, {
                        value: '房地产/建筑',
                        label: '房地产/建筑'
                        }, {
                        value: '互联网/计算机',
                        label: '互联网/计算机'
                        }, {
                        value: '通讯',
                        label: '通讯'
                        }, {
                        value: '服务/教育培训',
                        label: '服务/教育培训'
                        },{
                        value: '政府机关/非盈利机构',
                        label: '政府机关/非盈利机构'
                        }, {
                        value: '制造业',
                        label: '制造业'
                        }, {
                        value: '零售',
                        label: '零售'
                        },{
                        value: '广告业',
                        label: '广告业'
                        }, {
                        value: '贸易',
                        label: '贸易'
                        }, {
                        value: '医疗',
                        label: '医疗'
                        }, {
                        value: '物流/运输',
                        label: '物流/运输'
                        }],
               value4: '',
               options2:[{
                        value: '一年内',
                        label: '一年内'
                        },{
                        value: '1-3年',
                        label: '1-3年'
                        },{
                        value: '3-5年',
                        label: '3-5年'
                        },{
                        value: '5-10年',
                        label: '5-10年'
                        },{
                        value: '10年以上',
                        label: '10年以上'
                        }],
               value5:'',
               token:'',
               gsname:'',
               gsdz:'',
            }
         },
       methods:{
            back(){
            var that = this  
            var btnArray = ['狠心离开', '不放弃'];
            mui.confirm('差一点点就能拿到钱了，确定这时候放弃吗？','', btnArray, function(e) {
            if (e.index == 0) {
             that.$router.push({name:"merchantdetails"})
            } else {
            } 
         })
       },
    //    qxzhy(){
    //        let _this = this
    //        let lis = document.getElementById("test").getElementsByTagName("li");
    //         	for(let i=0;i<lis.length;i++){
	// 				lis[i].setAttribute("index",i);
    //                 //console.log(lis[i])
    //               lis[i].onclick=function(){  
    //                for(let j=0;j<lis.length;j++){ 
    //                // console.log(this.getAttribute("index"))
    //                   if(this.getAttribute("index")==j){
    //                      console.log(this.innerHTML)
    //                      _this.hy = this.innerHTML
    //                   } 
    //                 }
    //            }
    //         } 
    //         mui('#popover').popover('hide');
    //    },
           tj(){
               if(!this.gsname) return mui.toast('请填写公司名称');
               if(!this.gsdz) return mui.toast('请填写公司地址');
               if(!this.value4) return mui.toast("请选择所属行业");
               if(!this.value5) return mui.toast("请选择工作年限")
               this.token = localStorage.getItem('Token')
               var qs =  require('qs')
               this.$http.post('/api/auth/auth_company',qs.stringify({
                   'token':this.token,
                   'company_name':this.gsname,
                   'company_address':this.gsdz,
                   'industry':this.value4,
                   'work_age':this.value5,
               }))
                .then(res=>{
                    if(res.data.code="200"){
                        mui.toast('提交成功')
                        this.$router.go(-1)
                    }else{
                        mui.toast('提交失败，请重新填写')
                    }
                })
           }
    },
    mounted(){

    }
}       


</script>

<style lang="less" scoped>
         /**{ touch-action: none; }*/
         .box{
             width:100%;
             height:100%;
             background:#f5f5f5;
         }
         header{
               position:fixed;
               top:0;
               width:100%;
               height:1.88rem;
               display:flex;
               position: fixed;
               top:0;
               z-index:100;
               background: #fff;
         }
         .fh{
             width:2.1rem;
             line-height:1.88rem;
             text-align:center;
             z-index:100; 
             color:#333333;
             font-size:0.76rem;  
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               letter-spacing:0.02rem;
               position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
          h2{
             font-size:0.56rem;
             width:100%;
             height:1.28rem;
             background:#f5f5f5;
             text-align:center;
             line-height:1.28rem;
             color:#7e7e7f;
             margin-bottom:0.5rem;
         }
         .ts{
             font-size:0.44rem;
             line-height:1.24rem;
             color:#b5b5b5;
         }
         main{
             width:90%;
             background:#fff;
             border-radius:0.2rem;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
         }
         .list{
             width:95%;
             border-bottom: 0.02rem solid #dfdfdf;
             display:flex;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             padding:0 2%;
         }
         span{
             width:40%;
             line-height: 1.96rem;
             font-size:0.54rem;
             color:#302f2f;
         }
         input{
             position: relative;
             top:0;
             bottom:0;
             margin:auto 0;
             border:none;
             font-size:0.54rem;             
         }
         a{
             position: relative;
             top:0;
             bottom:0;
             margin:auto 0;
             border:none;
             font-size:0.54rem;
             padding-left:5%;
             color:#666;
         }
         .tj{
             width:100%;
             height:1.75rem;
             background: #2cbcf1; /* Old browsers */
            background: -moz-linear-gradient(left, #2cbcf1 1%, #11a0ef 34%, #11a0ef 63%, #1f87f6 100%, #207cca 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #2cbcf1 1%,#11a0ef 34%,#11a0ef 63%,#1f87f6 100%,#207cca 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #2cbcf1 1%,#11a0ef 34%,#11a0ef 63%,#1f87f6 100%,#207cca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2cbcf1', endColorstr='#207cca',GradientType=1 ); /* IE6-9 */
             border-radius:0.2rem;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             color:#fff;
             font-size:16px;
             border:none;
         }
         
</style>
